<button class="button">
  <svg
    stroke-linejoin="round"
    stroke-linecap="round"
    fill="none"
    stroke="currentColor"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    height="40"
    width="40"
    class="button__icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
    <path d="M7 11l5 5l5 -5"></path>
    <path d="M12 4l0 12"></path>
  </svg>
  <span class="button__text">Download</span>
</button>

<style>
/* From Uiverse.io by Creatlydev  - Tags: button */
.button {
  line-height: 1;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 1em;
  padding-right: 1.25em;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  border-radius: 2em;
  font-size: 1rem;
  box-shadow: 0 0.7em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
  transition: transform 0.3s;

  background: linear-gradient(
    90deg,
    rgba(77, 54, 208, 1) 0%,
    rgba(132, 116, 254, 1) 100%
  );
}

.button__icon {
  width: 1.5em;
  height: 1.5em;
}

.button:hover {
  border-color: #f4f5f2;
}

.button:active {
  transform: scale(0.98);
  box-shadow: 0 0.5em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
}

</style>
    